<!--
 * @LastEditTime : 2022-10-31 15:18:13
 * @FilePath     : /pyy/src/components/Calendar/index.vue
 * @Description  : 公共组件 > 选择时间(基于 vant field\calendar 封装)
-->

<template>
  <div class="calendar">
    <van-field
      readonly
      clickable
      :value="selectDate"
      v-bind="$attrs"
      @click="show = true"
    >
      <template #right-icon>
        <svg-icon name="date" />
      </template>
    </van-field>
    <van-calendar v-model="show" @confirm="handleConfirm" />
  </div>
</template>
<script>
export default {
  name: "Calendar",
  props: ["value"],
  model: {
    prop: "value",
    event: "update:value",
  },
  data() {
    return {
      show: false,
      selectDate: this.value,
    };
  },
  methods: {
    /**
     * 日期选择完成
     * @param {Date} date: 当前选中时间
     */
    handleConfirm(date) {
      this.show = false;
      const result = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      this.selectDate = result;
      this.$emit("update:value", result);
    },
  },
};
</script>
<style lang="less" scoped>
.calendar {
  width: 100%;
  height: max-content;

  /deep/ .van-field {
    .van-field__value {
      .van-field__body {
        .van-field__right-icon {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
